<template>
  <div>
    <h1 ref="myH1">{{num}}</h1>
    <button @click="changeNumFn">数量+1</button>
  </div>
</template>

<script>
export default {
  data(){
    return {
      num: 1
    }
  },
  methods: {
    changeNumFn(){
      this.num++;
      // 验证这里是否能获取到DOM的最新内容？
      // 答：不能立刻获取到DOM中的最新内容
      // 从结果中我们可以得出结论：说明DOM更新是异步，因此获取不到最新的值。
      // console.log(this.$refs.myH1.innerHTML); // 1 
      // 有些时候，需要要求我们修改数据后能立刻获取到DOM中的最新的值，那么如何实现呢？
      // 答：vue专门提供了一个方法$nextTick方法，可以让我们修改数据后立刻获取到DOM中的最新值
      // $nextTick语法：
      /**
       * this.$nextTick(()=>{
       *   这个$nextTick的回调函数会在数据更新后且DOM更新后触发。
       * })
       * 
       * 总结：
       *  1、DOM更新是异步的
       *  2、在$nextTick的回调函数中可以获取到DOM更新后的值
       * */ 
      this.$nextTick(()=>{
        console.log(this.$refs.myH1.innerHTML)
      })
    }
  },
  updated(){
    console.log(this.$refs.myH1.innerHTML);
  }
}
</script>

<style>

</style>